<script>
  import { moment } from 'istrong-timeutil'
  import { vList } from 'istrong-mvue-common-ui';

  export default {
    name: 'listPage',
    components: {
      'vc-List': vList
    },
    props: {
      beginTime: {
        type: String,
        required: true
      },
      endTime: {
        type: String,
        required: true
      },
      data: {
        type: Array,
        default: []
      },
      showIndex: {
        type: Boolean,
        default: true
      },
      fields: {
        type: Array,
        required: true
      },
      listClass: {
        type: String,
        default: ''
      },
      existFilter: {
        type: Boolean,
        default: true
      },
      rowClassRender: {
        type: Function
      },
      iosLock: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
      }
    },
    computed: {
      header_BeginTime: function () {
        return moment(this.beginTime).format('DD日HH时mm分');
      },
      header_EndTime: function () {
        return moment(this.endTime).format('DD日HH时mm分');
      }
    },
    methods: {
      onShowStationInfo(data) {
        this.$emit('showChartInfo', data);
      },
      onRouterToMap() {
        this.$emit('changeShowType', 'map');
      },
      onOpenFilterPanel() {
        this.$emit('setFilterConditions', true);
      }
    },
    mounted() {
    },
    created() {
    },
    beforeDestroy() {
    }
  }
</script>
<template>
  <div id="listViewer">
    <div class="appHeader-listViewer">
      <div class="appHeader-listViewer-Time">
        {{header_BeginTime}} 至 {{header_EndTime}}
      </div>
      <div class="appHeader-listViewer-ButtonControls">
        <div class="btChangeRouterMap" @click="onRouterToMap">
          <span class="ion-map"></span>
        </div>
        <div class="listViewer-ButtonFilter" @click="onOpenFilterPanel" v-if="existFilter">
          <img src="../assets/filter.png" />
        </div>
      </div>
    </div>
    <vc-List class="listViewer-List" :class="listClass" :fields="fields" :data="data" :showIndex="showIndex" @onItemClick="onShowStationInfo"
      :rowClassRender="rowClassRender" :iosLock="iosLock"></vc-List>
  </div>
</template>
<style>
.appHeader-listViewer-ButtonControls{
  min-width: 48px;
  margin: 0px 15px 0px 0px!important;
}
.listViewer-List{
  position: absolute;
  width: 100%;
  top: 40px;
  bottom: 0px;
}
.listViewer-List>.VGList-Content{
  position: absolute;
  top: 42px;
  bottom: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 16px;
}
</style>